<template>
  <el-dialog
    v-model="visible"
    title="修改报工数据"
    width="600px"
    @close="close"
  >
    <el-form :data="state.form" label-position="left">
      <el-form-item label="合格">
        <el-input-number
          v-model="state.form.qualifiedQty"
          :controls="false"
          placeholder="请录入合格数"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="报检">
        <el-input-number
          v-model="state.form.declareQty"
          :controls="false"
          placeholder="请录入报检数"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="报废">
        <el-input-number
          v-model="state.form.scrapQty"
          :controls="false"
          placeholder="请录入报废数"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="state.form.remark"
          placeholder="请录入备注"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="toCancel">取消</el-button>
        <el-button type="primary" @click="toConfirm()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
  const visible = ref(false)
  const state = reactive({
    reportItem: null,
    reportIndex: -1,
    form: {},
  })
  const toConfirm = () => {
    _emits('changeCallback', state.form, state.reportIndex)
    toCancel()
  }
  const close = () => {
    state.reportIndex = -1
    state.reportItem = null
    state.form = {}
  }
  const toCancel = () => {
    visible.value = false
  }
  const handleOpen = (reportItem, reportIndex) => {
    visible.value = true
    state.reportIndex = reportIndex
    state.form['qualifiedQty'] = reportItem.mesReport.qualifiedQty
    state.form['declareQty'] = reportItem.mesReport.declareQty
    state.form['scrapQty'] = reportItem.mesReport.scrapQty
    state.form['remark'] = reportItem.mesReport.remark
  }
  const _emits = defineEmits(['changeCallback'])
  defineExpose({
    handleOpen,
  })
</script>
<style lang="scss" scoped>
  :deep(.el-input__wrapper) {
    background: none;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: none;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
  :deep(.el-form-item) {
    margin-bottom: 3px;
  }
</style>
